<template>
  <!-- 头部区域 -->
  <div class="index-container">
    <div class="header-container" v-show="true">
      <Header></Header>
    </div>
    <div class="main-content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <!-- 尾部信息 -->
    <div class="footer">
      <div class="footer-container">
        <p>Copyright © 2022 lishun All Rights Reserved</p>
        <p>
          <a href="http://beian.miit.gov.cn/" target="_blank">
            渝ICP备2021009430号</a
          >
        </p>
      </div>
    </div>
    <Top></Top>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Top from "./components/Top.vue";


export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      bgimg:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F86b12c7e609be91a9cd7944051077197cb5ba31e5aebb-GdJSEV_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645524824&t=f8e74ab3ace717ab8c4108dbdfa69070",
    };
  },
  methods: {
    handleSelect() {},
  },
  components: {
    Header,
    Top,
  },
};
</script>

<style lang="less" scoped>
.main-content {
  padding-bottom: 88px;
}
.header-container {
  position: fixed;
  top: 0;
  z-index: 999;
}
.index-canvas {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}

.footer {
  position: relative;
  margin-top: 48px;
  width: 100%;
  height: 60px;
  .footer-container {
    position: absolute;
    right: 50%;
    bottom: 48px;
    text-align: center;
    transform: translateX(50%);
    a {
      text-decoration: none; //去掉下划线
      border-bottom: none; //去掉下边框（用text-decoration: none;没有用是时候加上）
      color: #666;
    }
  }
}

.bgimg {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
</style>